class App{

    constructor(){
        this.data=[
    {
        "title": "在移动设备开发",
        "user": "张若昀",
        "date": "2022-02-09",
        "id": "1"
    },
    {
        "title": "图形及特效特性",
        "user": "张若昀",
        "date": "2022-02-09",
        "id": "2"
    },
    {
        "title": "设备兼容特性",
        "user": "张若昀",
        "date": "2022-02-09",
        "id": "3"
    },
    {
        "title": "W3C将致力于开发用于实时通信",
        "user": "张若昀",
        "date": "2022-02-09",
        "id": "4"
    },
    {
        "title": "全新的表单输入对象",
        "user": "张若昀",
        "date": "2022-02-09",
        "id": "5"
    }
]
        this.arr = []
        this.bangding()
        this.cha()
        
    }
    bangding(){
        this.$('#add').addEventListener('click', this.add.bind(this))
       this.$('table').addEventListener('click', this.setData.bind(this));  
    }
    setData(event){
        if(event.target.id =='del') this.del(event.target)
        if(event.target.id =='change') this.updatedata(event.target)  
      }
      updatedata(event){
        var data=JSON.parse(localStorage.getItem('data'))
        var data1 = JSON.parse(localStorage.getItem('data'))
        var target=event
        var tan = this.$('#tan')
        tan.style.display='block'
        var n2=target.getAttribute("data-name")
        this.$('#gaititle').value = target.parentElement.parentElement.children[1].innerText
        this.$('#gaiuser').value = target.parentElement.parentElement.children[2].innerText
        this.$('#gaidate').value = target.parentElement.parentElement.children[3].innerText
        tan.onclick = function(ev){
            // data1.forEach(item=>{
            //     if(item.id=n2){
            //           item.title=document.getElementById('gaititle').value
            // item.user=document.getElementById('gaiuser').value
            // item.date=document.getElementById('gaidate').value
            //     }
            // })
            localStorage.setItem("data",JSON.stringify(data))
                if (ev.target.className == 'confirm') {
                    tan.style.display = "none";
                  
                    target.parentElement.parentElement.children[1].innerText = document.getElementById('gaititle').value
                    target.parentElement.parentElement.children[2].innerText = document.getElementById('gaiuser').value
                    target.parentElement.parentElement.children[3].innerText = document.getElementById('gaidate').value 
                }
                if (ev.target.className == 'cancel') {
                    tan.style.display = "none";
                }  
              
            }
            if (tan.style.display =="none") {
                    this.show1()
            }
      }
    del(event){
        var data=JSON.parse(localStorage.getItem('data'))
            var target=event
                var n1=target.getAttribute("data-name")
                data=data.filter(function(item){
                    return item.id!=n1
                })
                localStorage.setItem("data",JSON.stringify(data))
                this.show1()    
    }
    add(){
        var table = this.$('table')
        if(data){
            data=JSON.parse(data)
        }else{
            data=[]
        }
        var data=JSON.parse(localStorage.getItem('data'))

       var title = this.$('#title').value
       var user = this.$('#user').value
       var date = this.$('#date').value
       var id = parseInt(Math.random()*(10000000+1),10)
       if (title=="" || user=="" || date=="") {
		alert("请正确输入");
		return;
	}
    var arr={
        title:title,
        user:user,
        date:date,
        id:id
    }
    if(data.length>0){
        var bool=true
        data.forEach(function(item){
            if(item.title==title){
                bool=false
                alert('该用户名已存在')
            }
        })
        if(bool){
            data.push(arr)
            localStorage.setItem("data",JSON.stringify(data)) 
            this.show1()
        }else{
            data.push(arr)
            localStorage.setItem("data",JSON.stringify(data)) 
            this.show1()
         }
       }
    }
    show1(){

        var str=''
        str = ` <tr style="background-color: rgb(223, 210, 210);">
        <td width="60px">序号</td>
        <td width="660px">标题</td>
        <td width="160px">发布人</td>
        <td width="200px">发布时间</td>
        <td width="160px">操作</td>
        </tr>`
        var data=JSON.parse(localStorage.getItem('data'))
        data.forEach((item,index)=>{
           str+=`
           <tr>
           <td>${index+1}</td>
           <td>${item.title}</td>
           <td>${item.user}</td>
           <td>${item.date}</td>
           <td>
               <button id='del' data-name='${item.id}'>删除</button>
               <button id="change">编辑</button>
           </td>
       </tr>
           `
        })
        table.innerHTML=str
    }

    cha(){
        if (localStorage.getItem("data") != null) {
        }else{ 
             window.localStorage.setItem('data',JSON.stringify(this.data))
        }
        var str = ''
        var table = this.$('table')
      str = ` <tr style="background-color: rgb(223, 210, 210);">
        <td width="60px">序号</td>
        <td width="660px">标题</td>
        <td width="160px">发布人</td>
        <td width="200px">发布时间</td>
        <td width="160px">操作</td>
        </tr>`
        var data=JSON.parse(localStorage.getItem('data'))
        data.forEach((item,index)=>{
  

           str+=`
           <tr>
           <td>${index+1}</td>
           <td>${item.title}</td>
           <td>${item.user}</td>
           <td>${item.date}</td>
           <td>
               <button id='del' data-name='${item.id}'>删除</button>
               <button id="change" data-name='${item.id}'>编辑</button>
           </td>
       </tr>
           `
        })
        table.innerHTML=str
    
    }
    $(tag) {
        let res = document.querySelectorAll(tag)
        return res.length == 1 ? res[0] : res;
      }


}
new App